<script setup>
import { reactive, ref } from 'vue'
import { mdiMonitorCellphone, mdiAccountMultiple, mdiTableBorder, mdiTableOff } from '@mdi/js'
import MainSection from '@/components/MainSection.vue'
import Notification from '@/components/Notification.vue'
import ClientsTable from '@/components/ClientsTable.vue'
import CardComponent from '@/components/CardComponent.vue'
import TitleBar from '@/components/TitleBar.vue'
import HeroBar from '@/components/HeroBar.vue'
import BottomOtherPagesSection from '@/components/BottomOtherPagesSection.vue'
import TitleSubBar from '@/components/TitleSubBar.vue'
import Line from '@/components/Charts/Line'

const titleStack = ref(['Admin', 'Tables'])

const option = reactive({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
})

const childLine = ref(null)

const showTheInfo = (data) => {
  option.series[0].data = [...option.series[0].data, data]
  childLine.value.refresh()
}

</script>

<template>
  <Line
    id="chart"
    ref="childLine"
    :option="option"
    @showTheInfo="showTheInfo"
  />
  <title-bar :title-stack="titleStack" />
  <hero-bar>Tables</hero-bar>
  <main-section>
    <notification
      color="info"
      :icon="mdiMonitorCellphone"
    >
      <b>Responsive table.</b> Collapses on mobile
    </notification>

    <card-component
      class="mb-6"
      title="Clients"
      :icon="mdiAccountMultiple"
      has-table
    >
      <clients-table checkable />
    </card-component>

    <title-sub-bar
      :icon="mdiTableBorder"
      title="Wrapped variation"
    />

    <notification
      color="success"
      :icon="mdiTableBorder"
    >
      <b>Tightly wrapped</b> &mdash; table header becomes card header
    </notification>

    <card-component
      class="mb-6"
      has-table
    >
      <clients-table checkable />
    </card-component>

    <title-sub-bar
      :icon="mdiTableOff"
      title="Empty variation"
    />

    <notification
      color="danger"
      :icon="mdiTableOff"
    >
      <b>Empty table.</b> When there's nothing to show
    </notification>

    <card-component empty />
  </main-section>

  <bottom-other-pages-section />
</template>

<style scoped>
#chart {
  width: 400px;
  height: 400px;
}
</style>
